<script type="text/javascript">
    
    function initialize() 
    {
        var form = $.create("form", {"method":"post", "action":""});
        
        var username = $.create("input", {"name": "username", "type":"text"});
        var password = $.create("input", {"name": "password", "type":"password"});
        var login = $.create("div", {"class":"button_large"}, "Login");
        
        username.keyup( function(e) {
        	if (e.keyCode == 13) {
        		password.focus();
        	}
        });
        password.keyup( function(e) {
            if (e.keyCode == 13) {
            	form.submit();
            }
        });

        login.click( function() {
            form.submit();
        })
        
        form.append("<p><strong><?=$this->message ?></strong></p>");
        form.append($("<h1><strong>Username</strong></h1>"));
        form.append($("<p>"));
        form.append($.create("div", {"class":"input_large"}, username));
        form.append($("</p>"));
        form.append($("<h1><strong>Password</strong></h1>"));
        form.append($("<p>"));
        form.append($.create("div", {"class":"input_large"}, password));
        form.append($("</p>"));
        form.append(login);
        form.append($("<p>Don't have a user? <a href='<?= $this->route("users", "create") ?>'>Click here to create one</a>.</p>"));

        var frame = new Frame({"width":"400px", "center": true, "padding":"5px", "style":"metal"}).appendTo($("#loginContainer"));
        var container = frame.getContainer();
        container.append(form);
    }
    
    $(document).ready( function() {
        initialize();
    });
    
</script>

<div class="content-full">

<h1><?= $this->img("/images/icons/INV_Bijou_Gold.jpg") ?> Login </h1>

<div id="loginContainer">
</div>

TODO: add a remember me button somewhere

</div>